<template>
	<view class="content">
		<u-form v-show="!status" :model="form" ref="uForm" label-position="top" :border-bottom="false" :error-type="['toast']">
			<u-form-item :required="true" label="标题" :border-bottom="false" prop="title"><u-input :border="true" maxlength="15" v-model="form.title" /></u-form-item>
			<u-form-item :required="true" label="正文" :border-bottom="false" prop="content">
				<u-input type="textarea" maxlength="1024" :clearable="false" height="120" :auto-height="true" v-model="form.content" :border="true" />
			</u-form-item>
			<u-form-item :required="true" label="图片组" :border-bottom="false">
				<u-upload
					ref="uUpload"
					:action="action"
					name="file[]"
					max-count="6"
					:max-size="10 * 1024 * 1024"
					@on-success="upload"
					:before-upload="beforeUpload"
					@on-uploaded="onUploaded"
					@on-remove="onRemove"
				></u-upload>
			</u-form-item>
			<u-form-item :required="true" label="地址" :border-bottom="false" prop="address">
				<u-input @click="openMap" :border="true" :disabled="true" v-model="form.address" placeholder="请选择地址" />
			</u-form-item>
			<u-form-item :border-bottom="false"><u-button @click="submit" :loading="loading" type="primary">发布</u-button></u-form-item>
		</u-form>
		<view v-show="status">
			<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{ item.body }}</u-collapse-item>
			</u-collapse>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { upload } from '@/api/index.js';
import { shoot_add } from '@/api/user.js';
export default {
	data() {
		return {
			share: false, //关闭页面分享
			isNoMixin: true, //关闭判断
			itemList: [
				{
					head: '赏识在于角度的转换',
					body: '只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来',
					open: true
				},
				{
					head: '生活中不是缺少美，而是缺少发现美的眼睛',
					body: '学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美',
					open: false
				},
				{
					head: '周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧',
					body: '但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美',
					open: false
				}
			],
			action: upload,
			fileList: [],
			disabled: false,
			loading: false,
			form: {
				title: '',
				content: '',
				address: '',
				longitude: '',
				latitude: ''
			},
			rules: {
				// 字段名称
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: ['blur']
					}
				],
				content: [
					{
						required: true,
						message: '请输入正文内容',
						trigger: ['blur']
					}
				],
				address: [
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							if (value == '') {
								callback(new Error('地址不能为空'));
							} else {
								callback();
							}
						},
						message: '地址不能为空',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				]
			},
			status: true
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {
		this.status = uni.getStorageSync('status');
	},
	methods: {
		openMap() {
			//打开地图选择器
			uni.chooseLocation({
				success: res => {
					if (res.address) {
						this.form.address = res.address + res.name;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
					}
					console.log(res, '地理位置');
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
				}
			});
		},
		upload(res, index, lists, name) {
			//图片上传成功
			this.fileList.push(res.data);
		},
		onUploaded() {
			//所有图片上传完成
			this.disabled = false;
		},
		beforeUpload() {
			//上传中 设置不可提交
			this.disabled = true;
			return true;
		},
		onRemove(index, lists, name) {
			this.fileList = lists.map(item => item.response.data);
		},
		submit() {
			if (this.disabled) {
				return this.$refs.uToast.show({
					title: '上传未完成！',
					type: 'error'
				});
			}
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.fileList.length == 0) {
						return this.$refs.uToast.show({
							title: '最少上传一张图片',
							type: 'error'
						});
					}
					this.loading = true;
					shoot_add({
						imgs: this.fileList.join(','),
						...this.form
					})
						.then(res => {
							console.log(res, '发布');
							this.loading = false;
							if (res.code == 200) {
								this.$refs.uToast.show({
									title: res.data,
									type: 'success'
								});
								this.form = {
									title: '',
									content: '',
									address: '',
									longitude: '',
									latitude: ''
								};
								this.fileList = [];
								this.$refs['uUpload'].clear();
								uni.$emit('update_map'); //刷新上个页面
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 500);
							} else {
								this.$refs.uToast.show({
									title: res.data,
									type: 'error'
								});
							}
						})
						.catch(err => {
							this.loading = false;
							console.log(err);
						});
				} else {
					this.loading = false;
					console.log('验证失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
}
</style>
